<template>
    <div class="w750" >
        <div class="addBankCard" :style="{ '--themescolor': themes.color}">
            <div class="addBankCard-cont">
                <div class="item">
                    <span class="item-span">持卡人</span>
                    <div class="item-body">
                        <input  type="text" maxlength="20" placeholder="请输入持卡人姓名" class="item-inp" v-model="cardholder" />
                    </div>
                </div>
                <!-- accountSelect -->
                <div class="item"  @click="accountSelect">
                    <span class="item-span">开户地区</span>
                     <div class="item-body">
                        <input  type="text"  disabled="true" :value="addressStr" placeholder="请选择开户地区" class="item-inp text-ellipsis" :class="addressStr ? 'disabledColor' : 'disabledNot' " />
                        <div class="arr">
                            <img  src="@/assets/images/arrow.png"  alt="" class='arrImg' />
                        </div>
                     </div>
                   
                </div>

                <div class="item">
                    <span class="item-span">卡号</span>
                    <div class="item-body">
                        <input  type="number" maxlength="30" minlength="13"  placeholder="请输入银行卡卡号" class="item-inp"  v-model="cardNumber"/>
                    </div>
                </div>

                <div class="item" @click="openCardType">
                    <span class="item-span">银行卡类型</span>
                    <div class="item-body">
                        <input  type="text" disabled="true" placeholder="请选择银行卡类型"  class="item-inp" :value="orgName"  :class="orgName ? 'disabledColor' : 'disabledNot' "/>
                        <div class="arr">
                            <img  src="@/assets/images/arrow.png"  alt="" class='arrImg' />
                        </div>
                    </div>
                </div>

                <div class="item"  style="border:none" :style="{'display': cardNumber.length >= 13 ? 'flex' : 'none' }">
                    <span class="item-span">支行名称</span>
                    <div class="item-body">
                        <input  type="text" maxlength="20" placeholder="请输入支行名称" class="item-inp" v-model="branchName" />
                    </div>
                </div>

            </div>

            <div class="addBankCard-cont">
                <div class="item">
                    <span class="item-span">手机号</span>
                    <div class="item-body">
                        <input  type="number" maxlength="11" placeholder="请输入银行卡预留手机号码" class="item-inp" v-model="phone" />
                    </div>
                </div>

                <div class="item"  style="border:none">
                    <span class="item-span">验证码</span>

                    <div class="item-body">
                         <input  type="text" maxlength="6" placeholder="请输入验证码" class="item-inp" v-model="codeNumber" />
                        <getvali-date codeType="bindPhone"  :codeMobile="phone" :class="'send-code'" />
                    </div>
                </div>
            </div>

            <button class="bottom_btn delivery-btn" formType="submit" :style="{background: themes.color}" @click="achieve">完成</button>

            <van-popup v-model="bankingHouseShow" position="bottom" >
                <van-picker
                    show-toolbar
                    title="银行卡类型"
                    :columns="bankingHouse"
                    value-key="orgName"
                    :default-index="bankingHouseIndex"
                    @cancel="onCancel"
                    @confirm="onConfirm"
                />
            </van-popup>


            <address-select v-model="addressShow" title="开户地区" mode="code" :defaultValue="defaultValue" @confirm="onAddress"  />

            
            
            
        </div>
    </div>
</template>

<script>
import addressSelect from "components/addressSelect/addressSelect"
import getvaliDate from "components/getvaliDate/getvaliDate";
import { bankingHouse } from '@/utils/validateAndCacheCardInfo';
import { loadProvincesForCode,loadCitiesForCode,loadAreasForCode } from "api/addressManage";
import {addWithdrawBankCard, editWithdrawBankCard} from 'api/extensionApi';
import formCheck from 'utils/formCheck';
import { mapState } from "vuex";

export default {
    components: {
        getvaliDate,
        addressSelect
    },
    computed: {
        ...mapState(["themes"]),
    },
    data() {
        return {
            cardholder: '', //持卡人
            branchName: '', //支行名称
           
            selectIndex:0,

            //地址拼接  
            addressStr: '', 
            //存id做比较
            keyId: [], 

            //银行卡类型
            cardType: '',

            //开户银行
            orgName: '',
            //银行卡号
            cardNumber: '',  
            //手机号码
            phone: '',

            //短信验证码
            codeNumber: '', 

            bankingHouse: bankingHouse,
            bankingHouseShow: false,

            addressShow: false,


            bankingHouseIndex: 0,

            defaultValue: []
            
        }
    },
    mounted() {
        this.$route.query.source == 'edit' && this.loadeditWithdrawBankCard(this.$route.query.bankCardId)
        
    },
    methods: {

        //编辑回显的数据
        loadeditWithdrawBankCard(bankCardId){
            editWithdrawBankCard({bankCardId}).then(res => {
                if (res.status != 1) {
                    this.$toast(res.msg)
                    return
                }
                const data  = res.result
                this.cardholder = data.bankHolderName 
                this.addressStr = `${data.bankProvinceName || ''} ${data.bankCityName || ''} ${data.bankAreaName || ''} ${data.bankTownName || ''}`
                this.cardNumber = data.bankCardNumber
                this.cardType =  data.bankCode
                this.orgName = data.bankName
                this.branchName = data.bankSubName
                this.keyId = [data.bankProvinceCode,data.bankCityCode,data.bankAreaCode,data.bankTownCode]
                this.phone = data.bankHolderMobile
                this.defaultCard = data.defaultCard
                this.bankingHouseIndex = bankingHouse.findIndex(v => v.cardType == data.bankCode)
                
                this.defaultValue = [
                    {name: data.bankProvinceName, key:data.bankProvinceCode},
                    {name: data.bankCityName, key:data.bankCityCode},
                    {name: data.bankAreaName, key:data.bankAreaCode},
                    {name: data.bankTownName, key:data.bankTownCode},
                ]

                
               


                

            })
        },
        
        
        openCardType() {
            this.bankingHouseShow = true
        },
        //确认选择  -- 银行卡类型
        onConfirm(value, index) {
            this.cardType = value.cardType
            this.orgName = value.orgName
            this.hidenBankingHouseS()
        },

        //取消选择
        onCancel() {
            this.hidenBankingHouseS()
        },

        
        // /选择开户地区
        accountSelect() {
           let keyId = []
           this.addressShow = true


            // if (this.provinces.every(v => v.selectName)) {
            //     this.provinces.forEach(item => {
            //        keyId.push(item.key)
            //    })
            //    this.keyId = keyId
            // }

        },

        //确认选择地址做的事情
        onAddress(event) {



            this.addressStr = event.addressStr
            this.keyId = event.keyId
            
        },

        hidenBankingHouseS() {
            this.bankingHouseShow = false
            this.addressShow = false
        },

        //完成的操作
        achieve() {
			let errorMsg = formCheck.isNonEmpty(this.cardholder, '请输入持卡人') ||
			    formCheck.isNonEmpty(this.addressStr, '请选择开户地区') ||
			    formCheck.isNonEmpty(this.cardNumber, '请输入银行卡号') ||  
			    formCheck.isAccountNumber(this.cardNumber, '请输入正确的银行卡号') || 
			    formCheck.isNonEmpty(this.orgName, '请选择银行卡类型') ||
			    (this.cardNumber.length >= 13 ? formCheck.isNonEmpty(this.branchName, '请输入支行名称') : false)||
			    formCheck.isNonEmpty(this.phone, '请输入手机号') ||  
			    formCheck.phoneRight(this.phone, '请输入正确的手机号码') || 
			    formCheck.isNonEmpty(this.codeNumber, '请输入验证码') 
			
			
			if (errorMsg) {
			    this.$toast(errorMsg);
			    return 
			}
			
			this.$utils.uDebounce(() => {
				let addressStr = ''
				if (this.addressStr) {
				    addressStr = this.addressStr.split(' '); 
				}
				
				
				
				let bankCard = {
				    bankHolderName: this.cardholder, //持卡人
				    bankCardNumber: this.cardNumber, //银行号
				    bankCode: this.cardType, //银行类型编号
				    bankName:  this.orgName, //开户银行
				    bankSubName: this.branchName, //银行开户支行
				    bankHolderMobile: this.phone, //预留手机号
				    bankProvinceName: addressStr[0],  //开户银行省
				    bankProvinceCode: this.keyId[0], //开户银行省编码	
				    bankCityName: addressStr[1],  //开户银行市
				    bankCityCode: this.keyId[1], //开户银行市编码
				    bankAreaName: addressStr[2], //开户银行区
				    bankAreaCode: this.keyId[2], //开户银行区编码
				    bankTownCode: this.keyId[3],
				    bankTownName: addressStr[3],
				    smsCode: this.codeNumber 
				}
				
				let addPrames = {}
				if (this.$route.query.source == 'edit') {
				    addPrames.defaultCard = this.defaultCard
				    addPrames.id = this.$route.query.bankCardId
				}
				
				bankCard = {...bankCard, ...addPrames}
				
				// bankCard = JSON.stringify(bankCard)
				
				
				addWithdrawBankCard(
				   bankCard
				).then(res => {
				    if (res.status != 1) {
				        this.$toast(res.msg)
				        return
				    }
				    this.$toast({
				        message: this.$route.query.source == 'edit' ? '修改成功': '添加成功',
				        forbidClick: true, // 禁用背景点击
				    })
				
				   
				   setTimeout(() =>{
				      this.goback()
				   },2000)
				})
			})
            


        },
         // 返回
      goback() {
        this.$router.back();
        this.$router.isBack = true
      },  
    },
    beforeRouteEnter (to, from, next) {
		next(vm => {
			vm.$nextTick(()=> {
                if (vm.$route.query.source == 'edit') {
                    to.meta.titleName = '编辑银行卡'
                    to.meta.title = '编辑银行卡'
                    document.title = '编辑银行卡'
                } else {
                     to.meta.titleName = '添加银行卡'
                    to.meta.title = '添加银行卡'
                    document.title = '添加银行卡'
                }
				
			})
		})
	},
}
</script>

<style lang="stylus" scoped>



/* 地址 */
/* accountModules/addBankCard/addBankCard.wxss */

.addBankCard {
    width: 100%;
    padding: 0 0.20rem;
}

.addBankCard-cont {
    background: #fff;
    margin-top: 0.20rem;
    padding: 0 0.20rem;
}

.addBankCard-cont .item {
    line-height: 0.48rem;
    border-bottom: 1px solid #f8f8f8;
    font-size: 0.28rem;
    position: relative;
    padding: 0.20rem 0;
    display: flex;
    width: 100%;
}
.addBankCard-cont .item .item-span {
    display: block;
    flex: none;
    width: 1.6rem;
    line-height: 0.48rem;
    color: #888;
}
.addBankCard-cont .item .item-body {
    display: flex;
    align-items: center;
    width: 100%;
}
.addBankCard-cont .item .item-inp {
    // display: block;
    // box-sizing: border-box;
    // width: 100%;
    // min-width: 0;
    // margin: 0;
    // padding: 0;
    // color: #333;
    // background: #fff;
    // text-align: left;
    // background-color: initial;
    // border: 0;
    // font-size: 0.28rem;
    // resize: none;

    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #333;
    text-align: left;
    background-color: initial;
    border: 0;
    resize: none;
    appearance:none;
    -webkit-appearance: none;
   
}

.addBankCard-cont .item .item-inp.disabledColor {
    -webkit-text-fill-color: #333;
    text-fill-color: #333
    -webkit-opacity:1;
    opacity: 1;
}

.addBankCard-cont .item .item-inp.disabledNot {
     -webkit-text-fill-color: #999;
    text-fill-color: #999
    -webkit-opacity:1;
    opacity: 1;
}


.bottom_btn {
    height: .48em;
    width: 7.10rem;
    max-width: 750px;
    text-align: center;
    color: #ffffff;
    line-height: 0.48rem;
    font-size: 0.15rem;
    margin: 0.20rem auto 0;
}



.arr {
    display: block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    font-size: 0;
    margin-top: 4px;
}

 .arr .arrImg {
    width: 100%;
    height: 100%;
    vertical-align: top;
}



/* 地址 */



.send-code {
    flex-shrink: 0;
    font-size:12px;
    color: #666;
    padding: 0 5px;
    border-left: 1px solid #f8f8f8;

}
.bottom_btn {
    height: 48px;
    width: 7.10rem;
    max-width: 750px;
    text-align: center;
    color: #ffffff;
    line-height: 48px;
    font-size: 15px;
    margin: 20px auto 0;
}

</style>